<template>
  <el-card class="card-container" shadow="hover" @click="goStudy(item)">
    <div class="flex-column flex-top" style="padding: 0 15px">
      <div :title="item.name" class="course-name over-hidden">{{ item.name }}</div>
      <div class="default-text">
        <div v-if="daysBetween(item.validEndTime) > 0" style="padding-top: 10px">
          <span>剩余有效时间</span>
          <span style="margin-left: 6px;color: #171920;">{{ daysBetween(item.validEndTime) + '天' }}</span>
        </div>
        <div v-else style="padding-top: 10px">
          <span>已过期</span>
        </div>
        <div class="flex-start-center width100" style="margin-top: 10px">
          <span style="margin-right: 6px">学习进度</span>
          <div style="width: 200px">
            <el-progress :percentage="getCoursePercentage()" :color="'#04addb'" />
          </div>
        </div>
      </div>
      <div class="teacher-group flex-start over-hidden">
        <div class="teacher-item flex-column-center" v-for="item in item.teacherList">
          <img style="width: 30px;height: 30px;border-radius: 50%;margin-bottom: 8px" :src="item.avatarPicUrl" alt="">
          <span class="over-hidden">{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="flex-all-center button-text theme-hover">进入学习</div>
  </el-card>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {daysBetween, formatNumber} from '@/utils/common.js'

const route = useRoute();
const router = useRouter();

const props = defineProps({
  item: {
    type: Object
  },
  courseTypeId: {
    type: Number
  }
});
const getCoursePercentage = () => {
  let courseItem = props.item
  return formatNumber((courseItem.finishLessonCount / courseItem.lessonCount) * 100 )
}
const goStudy = (item) => {
  if(daysBetween(item.validEndTime)==0){
    return;
  }
  router.push({
    name: 'StudyList',
    query: {
      orderItemId: item.orderItemId,
      courseId: item.id,
      courseTypeId: props.courseTypeId
    }
  })
}
</script>

<style scoped>
.el-card {
  --el-card-border-radius: none
}
.el-card:hover {
  transform: translateY(-5px)
}
.card-container {
  width: 380px;
  height: 270px;
  padding-top: 20px;
  cursor: pointer;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #ececec;
}
.course-name {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  color: #171920;
}
.default-text {
  font-size: 14px;
  color: #9598a2;
  font-weight: 400
}
.teacher-group {
  width: 100%;
  padding: 30px 20px 20px 0;
}
.teacher-item {
  width: 61px;
  height: 56px;
  margin-right: 8px;
  font-size: 12px;
  color: #171920;
  font-weight: 400
}
.button-text {
  width: 100%;
  height: 60px;
  font-size: 14px;
  color: #666666;
  border-top: 1px solid #f2f2f2
}

</style>
